<template>
  <div>
    <!-- 广告列表 -->
    <el-card shadow="always" class="card">
      <div slot="header">
        <el-button type="primary" size="small" @click="add">新增</el-button>
      </div>
      <el-table :data="list" border>
        <el-table-column type="index" label="序号" fixed="left" />

        <el-table-column label="广告图片" width="150">
          <template slot-scope="scope">
            <img
              :src="scope.row.pic"
              style="width: 100px; height: 100px"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="时间" width="250">
          <template slot-scope="scope">
            <p>开始时间:{{ scope.row.startTime }}</p>
            <p>结束时间:{{ scope.row.endTime }}</p>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="name"
          label="广告名称"
          width="250"
        />
        <el-table-column
          align="center"
          prop="clickCount"
          label="点击数"
          width="150"
        />
        <el-table-column
          align="center"
          prop="orderCount"
          label="下单数"
          width="150"
        />
        <el-table-column
          align="center"
          prop="type"
          label="轮播位置"
          width="150"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.type === 0">首页轮播</p>
            <p v-else>其他</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="url"
          label="链接地址"
          width="150"
        />
        <el-table-column align="center" prop="note" label="备注" width="150" />
        <el-table-column align="center" label="上下线状态" :width="180">
          <template slot-scope="scope">
            <p>
              {{ scope.row.status === 1 ? '上线' : '下线' }}
            </p>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="goDelete(scope.row)"
              ><span style="color: red">删除</span></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <SkuDetail ref="detail" @success="detailSuccess" />
  </div>
</template>

<script>
import SkuDetail from '@/views/market/advertisement/components/detail.vue'
import advertise from '@/api/market/index'
export default {
  components: { SkuDetail },
  data() {
    return {
      list: []
    }
  },
  methods: {
    add() {
      this.$refs.detail.openDetail()
    },
    getadvertiseList() {
      advertise.getadvertise().then((res) => {
        if (res.success) {
          this.list = res.data.items
        } else {
          this.$message.error(res.success)
        }
      })
    },
    //编辑
    goEdit(item) {
      this.$refs.detail.openDetail(item)
    },
    //删除
    goDelete(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          advertise.delAds(row.id).then((res) => {
            if (res.success) {
              this.getadvertiseList();
              this.$message.success('删除成功')
            } else {
              this.$message.error(res.success)
            }
          })
        })
        .catch((rej) => {
          console.log(rej)
        })
    },
    detailSuccess() {
      this.getadvertiseList()
    }
  },
  created() {
    this.getadvertiseList()
  }
}
</script>

<style scoped lang='scss'>
.card {
  margin: 30px;
}
</style>